<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html lang="zh-cn">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title> 
    <link rel="stylesheet" href="<%=path %>/admin/jedate/skin/jedate.css"> 
    <script src="<%=path %>/admin/js/jquery.js"></script>
    <script src="<%=path %>/admin/js/pintuer.js"></script> 
    <script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="<%=path%>/static/js/weui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/static/js/echarts.common.min.js"></script>
	<script src="<%=path %>/admin/jedate/jquery.jedate.js"></script> 
    <style type="text/css" media="screen">
        * {
            padding: 0;
            margin: 0;
        }
        .promotion-name-wrap {
            padding: 50px 100px;
        }
        .promotion-table {
            width: 100%;
            text-align: center;
            margin-top: 10px;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
        .promotion-table tr td,.promotion-table tr th {
            padding:10px 30px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .pro-registered {
            margin: 100px 0 10px;
        }
        .detail-search input{
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            padding: 2px;
        }
        .detail-search div {
            display: inline-block;
            width: 120px;
            height: 24px;
            text-align: center;
            margin: 0 0 0 30px;
            background: #eee;
            border-radius: 4px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .prom{
          padding: 5px 100px;
        }
        .div-inline{  
          display: inline-block;
          padding: 5px 50px;  
        }
        @media screen and (max-width:1440px) {
            #main1,#main2 {
                width: 400px;
            }
        }
    </style> 
</head>
<body>
<div class="prom detail-search">
    <input type="" name="" id="keywords" placeholder="日期">
    <div onclick="changesearch()">搜索</div>
</div>
<div class="promotion-name-wrap">
        <div>产品点击图表统计</div>
        <div>
            <table class="promotion-table" cellspacing="0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>产品名称</th>
                        <th>月点击量</th>
                        <th>总点击量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="fir" >
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
     <div id="main1" class="div-inline" style="width: 600px;height:400px;"></div>
     <div id="main2" class="div-inline" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">

console.log($(window).width())
if($(window).width() < 1300) {
	$("#main1").width(400);
	$("#main2").width(400);
}
//$("#main1")
var paths = '<%=path %>';
var text="";
var data1 = [];
var data2 = [];
$('#keywords').jeDate({
    isinitVal:true,
    format: 'YYYY-MM' // 分隔符可以任意定义，该例子表示只显示年月
});
$(function(){
  var date = $("#keywords").val(); 
   page(date)
})

function changesearch(){
   var date = $("#keywords").val();
   if(date!=""){
	   data1.splice(0,data1.length);
	   data2.splice(0,data2.length);
	   page(date);
   }
}
function page(date){
    $.ajax({ 
        type:"post",
        url:"<%=path %>/click/newPage.html",
        data:{
          date:date	
        },
        dataType: "json",  
        timeout: 10000,  
        cache: false,  
        error: function(){
            alert("系统忙...");
        },
        success: function(data){
        	var json=eval(data);
            var htmls = "";
         $.each(json.toltelSum, function (index, item) {
        	 var sel={
        	    value : item.clickNum ,
        	    name  : item.name
        	 }
        	 data2.push(sel)
        	 var sel1={
        		 value : item.totelNum ,
                 name  : item.name
        	 }
        	 data1.push(sel1);
        	 var xu=index+1;
               htmls+='<tr class="fir">'
                    +'<td>'+xu+'</td>'
                    +'<td>'+item.name+'</td>'
                    +'<td>'+item.clickNum+'</td>'
                    +'<td>'+item.totelNum+'</td>'
                    +'</tr>'
         });
         $(".fir").remove();
         $("thead").after(htmls);
         text = $("#keywords").val()+"月点击统计";
         charts1();
         charts2();
        } 
    });
}


function charts1(){
	var myChart = echarts.init(document.getElementById('main1'));
	option = {
	        title : {
	            text: text,
	           /*  subtext: '纯属虚构', */
	            x:'center'
	        },
	        tooltip : {
	            trigger: 'item',
	            formatter: "{a} <br/>{b} : {c} ({d}%)"
	        },
	       /*  legend: {
	            orient: 'vertical',
	            left: 'left',
	            data: data1
	        }, */
	        series : [
	            {
	                name: '访问来源',
	                type: 'pie',
	                radius : '55%',
	                center: ['50%', '60%'],
	                data:data2,
	                itemStyle: {
	                    emphasis: {
	                        shadowBlur: 10,
	                        shadowOffsetX: 0,
	                        shadowColor: 'rgba(0, 0, 0, 0.5)'
	                    }
	                }
	            }
	        ]
	    };
	myChart.setOption(option);
}

function charts2(){
    var myChart = echarts.init(document.getElementById('main2'));
    option = {
            title : {
                text: "总点击统计",
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
           /*  legend: {
                orient: 'vertical',
                left: 'left',
                data: data1
            }, */
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:data1,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    myChart.setOption(option);
}


</script>
</html>